<template>
  <div class="page-container">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-form :model="searchParams" inline size="medium">
        <el-form-item label="企业名称:" prop="enterpriseName">
          <el-input v-model="searchParams.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <!-- 缴费时间 -->
        <el-form-item label="缴费时间：">
          <el-form-item prop="start" class="start-time">
            <el-date-picker
              v-model="searchParams.start"
              type="date"
              placeholder="开始日期"
              :picker-options="{disabledDate: disabledStartDate}"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <span>至</span>
          <el-form-item prop="end" class="end-time">
            <el-date-picker
              v-model="searchParams.end"
              type="date"
              placeholder="结束日期"
              :picker-options="{disabledDate: disabledEndDate}"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearchProperty">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加物业费按钮 -->
    <div class="add-property">
      <el-button v-auth-btn="'park:propertyFee:add'" type="primary" size="medium" @click="onOpenPropertyEditor()">添加账单</el-button>
    </div>
    <!-- 物业费数据列表 -->
    <el-table :data="propertyList" :header-cell-style="{ background: '#f7f8f9' }" size="medium">
      <!-- 序号 -->
      <el-table-column label="序号" type="index" width="60" />
      <!-- 账单编号 -->
      <el-table-column label="账单编号" prop="billNumber" />
      <!-- 企业名称 -->
      <el-table-column label="企业名称" prop="enterpriseName" />
      <!-- 租赁楼宇 -->
      <el-table-column label="租赁楼宇" prop="buildingName" />
      <!-- 物业费 -->
      <el-table-column label="物业费（元/m²）" prop="propertyFeePrice" />
      <!-- 账单金额 -->
      <el-table-column label="账单金额（元）" prop="paymentAmount" />
      <!-- 缴费时间 -->
      <el-table-column label="缴费周期" width="200">
        <template #default="{ row }">
          {{ row.startTime + ' 至 ' + row.endTime }}
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-auth-btn="'park:propertyFee:query'" type="text" @click="onOpenPropertyDetails(row)">查看</el-button>
          <el-button v-auth-btn="'park:propertyFee:remove'" type="text" @click="onDeleteProperty(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      :page-size="10"
      layout="->, total, prev, pager, next"
      :total="total"
      @current-change="getPropertyList"
    />
    <!-- 添加物业费账单弹窗 -->
    <PropertyEditor ref="propertyEditorRef" @update-list="getPropertyList" />
    <!-- 物业费详情弹窗 -->
    <PropertyDetails ref="propertyDetailsRef" />
  </div>
</template>

<script>
import { getPropertyListAPI, deletePropertyAPI } from '@/api/property'

import PropertyEditor from './components/PropertyEditor'
import PropertyDetails from './components/PropertyDetails'

export default {
  name: 'Property',
  components: {
    PropertyEditor,
    PropertyDetails
  },
  data() {
    return {
      // 查询参数
      searchParams: {
        page: 1,
        pageSize: 10,
        enterpriseName: '', // 企业名称
        start: '', // 缴费起始时间
        end: '' // 缴费结束时间
      },
      // 物业费列表
      propertyList: [],
      // 物业费列表数据总条数
      total: 0
    }
  },
  created() {
    // 获取物业费列表
    this.getPropertyList()
  },
  methods: {
    // 禁用的缴费开始的时间，缴费开始时间应早于缴费结束时间
    disabledStartDate(time) {
      return time.getTime() > new Date(this.searchParams.end).getTime() - 8.64e+7
    },
    // 禁用的缴费结束时间，缴费结束时间应晚于缴费起始时间
    disabledEndDate(time) {
      return time.getTime() < new Date(this.searchParams.start).getTime()
    },
    // 获取物业费列表
    async getPropertyList() {
      const res = await getPropertyListAPI(this.searchParams)
      this.propertyList = res.rows
      this.total = res.total
    },
    // 获取物业费列表第一页
    onSearchProperty() {
      this.searchParams.page = 1
      this.getPropertyList()
    },
    // 删除物业费账单数据
    onDeleteProperty(id) {
      this.$confirm('您确定删除这条物业费账单数据吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePropertyAPI(id)
        this.$message.success('删除成功')
        // 刷新物业费列表
        this.getPropertyList()
      }).catch(() => {
        // console.log('已取消删除')
      })
    },
    // 打开添加物业费弹窗
    onOpenPropertyEditor() {
      this.$refs.propertyEditorRef.open()
    },
    // 打开物业费详情弹窗
    onOpenPropertyDetails(row) {
      this.$refs.propertyDetailsRef.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-container {
    border-bottom: 1px solid #eee;
    .el-form {
      .el-form-item {
        margin-right: 40px;
        .el-date-editor {
          width: 140px;
        }
      }
      .start-time {
        margin-right: 5px;
      }
      .end-time {
        margin-left: 5px;
        margin-right: 0;
      }
    }
  }
  .add-property {
    margin-top: 25px;
  }
  ::v-deep .el-table {
    margin: 25px 0;
    .el-table__cell {
      padding: 5px 0;
    }
  }
}
</style>
